// toggle states

// UNCHECKED
// ENABLED
$toggle-bg: var(--surface-default-low);
$toggle-handle-bg: var(--surface-inverse-high);

// HOVERED
$toggle-bg-hover: var(--surface-default-low);
$toggle-handle-bg-hover: var(--surface-inverse-low);

// CHECKED
// ENABLED
$toggle-bg-checked: var(--surface-default-low);
$toggle-handle-bg-checked: var(--interaction-primary-enabled);

// HOVERED
$toggle-bg-checked-hover: var(--surface-default-low);
$toggle-handle-bg-checked-hover: var(--interaction-primary-hovered);

// error
$toggle-error-color: var(--text-danger);
$toggle-bg-error: var(--border-danger-low);
$toggle-handle-bg-error: var(--text-danger);

$toggle-width: $space-32;
$toggle-height: $space-16;
$toggle-border-radius: 8px;

$toggle-handle-width: $toggle-height - $space-4;
$toggle-handle-height: $toggle-height - $space-4;
$toggle-handle-border-radius: 50%;

$toggle-outline: var(--focused);
$toggle-disabled-opacity: 0.3;
